<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Count extends React.Component {

  constructor(props) {
    console.log('Count-constructor');
    super(props)
    this.state = {count:0}
  }
  add = () => {
    console.log(this.state.count);
    const {count} = this.state
    this.setState = {count:count+1}
  }

  death = () => {
    ReactDom.unmountComponentAtNode(document.getElementById('example'))
  }
  // 18已经不支持了
  // static getDerivedStateFromProps(props){
  //   console.log(getDerivedStateFromProps,props);
  //   return {count:108}
  // }

  // 把props的值当作状态  更新的时候该方法也会触发（从props那里得到一个派生的状态）
  // static getDerivedStateFromProps(props){
  //   console.log(getDerivedStateFromProps,props);
  //   return props
  // }

  componentDidMount(){
    console.log('Count---componentDidMount');
  }

  // 更新之前返回一个快照
  getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate');
    return 'helloworld'
  }

  // 可以接收两个值props和先前的state
  componentDidUpdate(props, preState,snapshotValue){
    console.log('componentDidUpdate');
  }

   // 组件将要卸载
   componentWillUnmount(){
    console.log('Count---componentWillUnmount');
   }


  render(){
    console.log('Count---render');
    const {count} = this.state
    return (
      <div>
        <h2>当前求和为：{count}</h2>
        <button onClick={this.add}>点我加1</button>
        <button onClick={this.death}>卸载组件</button>
      </div>
    )
  }
} 





ReactDOM.render(
	<Count/>,
	document.getElementById('example')
);

</script>

</body>
</html>